<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>存管开通指南</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <script type="text/javascript" src="./js/flexible.js"></script>
  <link rel="stylesheet" href="css/swiper.css">
  <style>
  * {
     margin: 0;
     padding: 0;
  }
  li {
     list-style: none;
  }
  img {
     box-sizing: border-box;
	 max-width: 100%;
	 height: auto;
	 vertical-align: middle;
	 border: 0;
  }
  .flex {
     display: flex;
  }
  .fd-row {
     flex-direction: row;
  }
  .fd-column {
     flex-direction: column;
  }
  .flex-1 {
     flex: 1;
  }
  .jc-space-between {
	 justify-content: space-between;
  }
  .ai-center {
	 align-items: center;
  }
  .main-item {
     display: none;
  }
  .item-title {
     font-size: 18px;
     color: #fd6c43;
     font-weight: bold;
  }
  .item-main {
     margin-top: 10px;
     color: #454444;
     font-size: 14px;
     line-height: 20px;
  }
  .header {
     margin: 15px 0.4rem 0;
  }
  .footer {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 99;
  }
  .footer-item {
     flex: 1;
     flex-direction: row;    
     text-align: center;
     background: #fc8e6e;
     color: #FFF;
     font-size: 18px;
     height: 50px;
     line-height: 50px;
  }
  .active {
     background: #fd6d43;
  } 
  .swiper-container {
     padding-bottom: 0.88rem;
  }
  .swiper-slide-child {
     background-position: center;
     background-size: cover;
     width: 6.47rem;
     margin: 0 auto;
     height: 11.23rem;
   }
   .swiper-pagination-bullet {
     width: 6px;
     height: 6px;
     background: #FFF;
     border: 2px solid #fd6c43;
     opacity: 1;
   }
   .swiper-pagination-bullet-active {
     background: #fd6c43;
     border: 2px solid #fd6c43;
   }
   .recharge, .invest, .invest {
     margin-top: 50px;
   }
   .color-1 {
     color: #fd6c43;
   }
   .swiper-button-disabled {
/*      opacity: 1 !important; */
   }
   .regular_invest .swiper-button-next.swiper-button-disabled {
     pointer-events: auto !important;    
   }
</style>
</head>
<body>
<div class="fd-column">
     <div class="wrapper" style="height: 15.63rem;">
          <div class="main-item" style="display: block;">
               <div class="header">
                    <div class="item-title">1.开户指引</div>
                    <div class="item-main">银行存管上线后，您需要完成开户流程后，方可进行存管相关操作。</div>
               </div>
               <div class="main-con">
                    <div class="swiper-container open_user" >
					    <div class="swiper-wrapper">
					        <div class="swiper-slide">
					             <div class="swiper-slide-child" style="background-image: url(img/open_step1.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/open_step2.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/open_step3.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/open_step4.png);"></div>
					        </div>
					    </div>
					    <div class="swiper-pagination"></div>
					    <div class="swiper-button-prev"></div>
					    <div class="swiper-button-next"></div>
					    
					</div>
               </div>
          </div>
          <div class="main-item">
               <div class="header">
                    <div class="item-title">2.充值指引</div>
                    <div class="item-main"></div>
               </div>
               <div class="main-con">
                    <div class="swiper-container recharge" >
					    <div class="swiper-wrapper">
					        <div class="swiper-slide">
					             <div class="swiper-slide-child" style="background-image: url(img/recharge_step1.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/recharge_step2.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/recharge_step3.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/recharge_step4.png);"></div>
					        </div>
					    </div>
					    <div class="swiper-pagination swiper-p2"></div>
					    <div class="swiper-button-prev swiper-bp2"></div>
					    <div class="swiper-button-next swiper-bn2"></div>
					    
					</div>
               </div>
          </div>
          <div class="main-item">
               <div class="header" >
                    <div class="item-title">3.投资指引- <span class="invest_select">【定期理财】</span></div>
                    <div class="item-main"></div>
               </div>
               <div class="main-con">
                    <div class="swiper-container invest">
                         <div class="swiper-wrapper">
                              <div class="swiper-slide">
					               <div class="swiper-slide-child" style="background-image: url(img/regular_step1.png);"></div>
					          </div>
					          <div class="swiper-slide" >
					               <div class="swiper-slide-child" style="background-image: url(img/regular_step2.png);"></div>
					          </div>
					          <div class="swiper-slide" >
					               <div class="swiper-slide-child" style="background-image: url(img/regular_step3.png);"></div>
					          </div>
					          <div class="swiper-slide" >
					               <div class="swiper-slide-child" style="background-image: url(img/regular_step4.png);"></div>
					          </div>
					          <div class="swiper-slide">
						           <div class="swiper-slide-child" style="background-image: url(img/current_step1.png);"></div>
						      </div>
					          <div class="swiper-slide" >
					               <div class="swiper-slide-child" style="background-image: url(img/current_step2.png);"></div>
		  		              </div>
					          <div class="swiper-slide" >
						           <div class="swiper-slide-child" style="background-image: url(img/current_step3.png);"></div>
						      </div>
					    </div>
					    <div class="swiper-pagination swiper-p3"></div>
					    <div class="swiper-button-prev swiper-bp3" ></div>
					    <div class="swiper-button-next swiper-bn3"></div>
					</div>
               </div>
          </div>
          <div class="main-item">
               <div class="header">
                    <div class="item-title">4.提现指引</div>
                    <div class="item-main">【活期理财需先赎回再提现】。</div>
               </div>
               <div class="main-con" style="margin-top: 20px;">
                    <div class="swiper-container withdraw" >
					    <div class="swiper-wrapper">
					        <div class="swiper-slide">
					             <div class="swiper-slide-child" style="background-image: url(img/withdraw_step1.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/withdraw_step2.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/withdraw_step3.png);"></div>
					        </div>
					        <div class="swiper-slide">
					             <div class="swiper-slide-child" style="background-image: url(img/withdraw_step4.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/withdraw_step5.png);"></div>
					        </div>
					        <div class="swiper-slide" >
					             <div class="swiper-slide-child" style="background-image: url(img/withdraw_step6.png);"></div>
					        </div>
					    </div>
					    <div class="swiper-pagination swiper-p4"></div>
					    <div class="swiper-button-prev swiper-bp4"></div>
					    <div class="swiper-button-next swiper-bn4"></div>
					    
					</div>
               </div>
          </div>
          <div class="main-item">
               <div style="padding-top: 4.8rem;">
                    <p class="color-1" style="font-size: 18px;text-align: center;">5.回款指引</p>
                    <div class="flex" style="font-size: 14px;margin-top: 20px;">
                       <div class="color-1" style="word-break:keep-all;">【存管上线前】：</div>
                       <div>购买的定期理财依旧回款至银行卡</div>
                    </div>
                    <div class="flex" style="font-size: 14px;margin-top: 15px;">
                       <div class="color-1" style="word-break:keep-all;">【存管上线后】：</div>
                       <div>购买的定期理财默认回款至账户余额</div>
                    </div>
               </div>         
          </div>
     </div>
     <div class="footer flex">
          <div class="footer-item btn-open active">开户</div>
          <div class="footer-item btn-recharge">充值</div>
          <div class="footer-item btn-invest">投资</div>
          <div class="footer-item btn-withdraw">提现</div>
          <div class="footer-item ">回款</div>
     </div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="./js/swiper.min.js"></script>
<script>
$(document).ready( function() {
	$(function(){
		var screenHeight = $(document).height();
		var _channel = '${param._channel}';
		// var itemMainHeight = $(".item-main").outerHeight();
		//console.log(screenHeight);
		//$(".wrapper").height((screenHeight - 65) + "px");
        
		if(_channel && _channel.toLowerCase().indexOf("appst") >= 0) {
//			$(".wrapper").height((screenHeight - 129) + "px");
			$(".footer").css({
				bottom: '64px'
			})
		}

	})
	var mySwiper2, mySwiper3, mySwiper4;
	$(".footer-item").click(function(){
		var _index = $(this).index();
		
		$(this).addClass("active").siblings().removeClass("active");
		$(".main-item").eq(_index).show().siblings().hide();
		if ( $(this).hasClass("btn-recharge")) {
			
			if( mySwiper2 != undefined ) {
			 	//console.log("出来吧");
				mySwiper2.destroy(true,true);			 	
			 	//mySwiper.updateClasses();
			 };
			 mySwiper2 = new Swiper ('.recharge', {
			    pagination: '.swiper-p2',	    
			    nextButton: '.swiper-bn2',
			    prevButton: '.swiper-bp2',		    
			 });
			 	
			 //mySwiper2.update();
			 //mySwiper2.updateProgress()
			 //mySwiper2.destroy(true);
			 //mySwiper2.updatePagination()
		};
		if( $(this).hasClass("btn-invest") ) {	
			if( mySwiper3 != undefined ) {
				mySwiper3.destroy(true,true);
			};
		    mySwiper3 = new Swiper ('.invest', {
				pagination: '.swiper-p3',	    
			    nextButton: '.swiper-bn3',
			    prevButton: '.swiper-bp3',
			    onSlideChangeEnd: function (swiper) { // pagination BUG
			        var activeIndex = swiper.activeIndex;
			        $('.swiper-p3')
			            .find('span')
			            .eq(activeIndex)
			            .addClass('swiper-pagination-bullet-active')
			            .siblings()
			            .removeClass('swiper-pagination-bullet-active');
			        if(activeIndex < 4){		
 			    		$(".invest_select").text("【定期理财】");
 			        };
			        if(activeIndex > 4 || activeIndex == 4){		
 			    		$(".invest_select").text("【活期理财】");
 			        };
			    }

			}); 

		};
		if( $(this).hasClass("btn-withdraw") ) {
			if( mySwiper4 != undefined ) {
				mySwiper4.destroy(true,true);
			};
			mySwiper4 = new Swiper ('.withdraw', {
				pagination: '.swiper-p4',	    
			    nextButton: '.swiper-bn4',
			    prevButton: '.swiper-bp4',
			    onSlideChangeEnd: function (swiper) { // pagination BUG
			        var activeIndex = swiper.activeIndex;
			        $('.swiper-p4')
			            .find('span')
			            .eq(activeIndex)
			            .addClass('swiper-pagination-bullet-active')
			            .siblings()
			            .removeClass('swiper-pagination-bullet-active');
			    }

			 }); 
		}
 	});
	var mySwiper1 = new Swiper ('.open_user', {
		pagination: '.swiper-pagination',
	    nextButton: '.swiper-button-next',
	    prevButton: '.swiper-button-prev',
	    
	 }); 
	
})
</script>
</body>
</html>
